<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				width: 500px;
				height: 500px;
			}
			
			.loading {
				width: 100%;
				height: 100%;
				background: #000000;
				position: relative;
			}
			
			.loading div {
				margin: auto;
				position: absolute;
				top: calc(50% - 40px);
				left: calc(50% - 40px);
				width: 80px;
				height: 80px;
				display: block;
				/*animation: loading 60s infinite;*/
			}
			/* @keyframes loading {
				form {
					-webkit-transform: rotate(0deg);
				}
				to {
					-webkit-transform: rotate(360deg);
				}
			}*/	
			.loading span {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				-webkit-animation: i 6s infinite;				
			}
			
			.loading span:after {
				content: '';
				display: block;
				position: absolute;
				left: 0px;
				top: 0px;
				width: 10px;
				height: 10px;
				background: rgba(255, 255, 255, 1);
				border-radius: 10px;
			}
			
			.loading span:nth-child(1) {
				-webkit-animation-delay: 0.2s;
			}
			
			.loading span:nth-child(2) {
				-webkit-animation-delay: 0.4s;
			}
			
			.loading span:nth-child(3) {
				-webkit-animation-delay: 0.6s;
			}
			
			.loading span:nth-child(4) {
				-webkit-animation-delay: 0.8s;
			}
			
			.loading span:nth-child(5) {
				-webkit-animation-delay: 1s;
			}
			

			
			@keyframes i {
				0% {
					opacity: 1;
					-webkit-transform: rotate(225deg);
					-webkit-animation-timing-function: ease-out;
				}
				10% {
					opacity: 1;
					-webkit-transform: rotate(360deg);
					-webkit-animation-timing-function: linear;
				}
				30% {
					opacity: 1;
					-webkit-transform: rotate(450deg);
					-webkit-animation-timing-function: ease-in-out;
				}
				50% {
					opacity: 1;
					-webkit-transform: rotate(720deg);
					-webkit-animation-timing-function: linear;
				}
				70% {
					opacity: 1;
					-webkit-transform: rotate(810deg);
					-webkit-animation-timing-function: ease-out;
				}
				80% {
					opacity: 1;
					-webkit-transform: rotate(945deg);
					-webkit-animation-timing-function: ease-out;
				}
				81% {
					opacity: 0;
					-webkit-transform: rotate(945deg);
				}
				100% {
					opacity: 0;
					-webkit-transform: rotate(945deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="loading">
			<div>
			    <span></span>
			    <span></span>
			    <span></span>
			    <span></span>
			    <span></span>
  			</div>
		</div>
	</body>

</html>